<template>
  <div>
    <el-card
      header="现场试验经费"
      shadow="never"
      :body-style="{ color: '#606266', lineHeight: 1.5 }"
    >
      <vxe-grid v-bind="gridOptions">
        <template #operate="{ row }">
          <div>
            <el-link type="primary" @click="handleDetail(row)">详情</el-link>
          </div>
        </template>
      </vxe-grid>
    </el-card>
  </div>
</template>

<script setup>
  import { useDictStore } from '@/store/modules/dict'

  const dictStore = useDictStore()

  const router = useRouter()

  const props = defineProps({
    list: {
      type: Array,
      default: () => [],
    },
  })

  // 模拟分页接口
  const findPageList = (currentPage, pageSize) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          page: {
            total: props.list.length,
          },
          result: props.list.slice(
            (currentPage - 1) * pageSize,
            currentPage * pageSize
          ),
        })
      }, 100)
    })
  }
  const gridOptions = reactive({
    border: true,
    rowConfig: {
      keyField: 'id',
    },
    columnConfig: {
      resizable: true,
    },
    pagerConfig: {
      enabled: true,
      pageSize: 10,
    },
    columns: [
      { field: 'id', title: '现场试验经费申请ID' },
      {
        field: 'status',
        title: '审核状态',
        formatter: ({ row }) => {
          return dictStore.getDictLabelForValue('audit_status', row.status)
        },
      },
      { field: 'lossAmount', title: '试验经济损失金额' },
      { field: 'creatorDepName', title: '上报单位' },
      { field: 'creatorName', title: '上报人' },
      {
        field: 'createTime',
        title: '记录创建时间',
        formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
      },
    ],
    proxyConfig: {
      props: {
        result: 'result',
        total: 'page.total',
      },
      ajax: {
        // 接收 Promise
        query: ({ page }) => {
          return findPageList(page.currentPage, page.pageSize)
        },
      },
    },
  })

  const handleDetail = ({ id }) => {
    router.push(`/researchFunds/fieldTest/details?id=${id}`)
  }
</script>
